<template>
  <view class="container">
    <!-- 已预约时间 -->
    <view class="yuyuebox">
      <!-- 周几 -->
      <view style="display: flex; align-items: center; margin-top: 30rpx; margin-bottom: 26rpx">
        <view :class="{ common: true, act: actindex == index }" v-for="(item, index) in list" :key="index" @click="chooseweek(index)">
          <view>
            <text style="display: block">{{ item.name }}</text>
            <text style="display: block; font-size: 26rpx">{{ item.week_date.split('-')[1] + '-' + item.week_date.split('-')[2] }}</text>
          </view>
        </view>
      </view>
      <!-- 时间段 -->
      <view style="display: flex; flex-wrap: wrap">
        <view
          :class="{ yuyueitem: true, timecommon: item2.isTrue, yiyuyue: item2.status == 2 && item2.user_cancel == 0 }"
          v-for="(item2, index) in list[actindex].list"
          :key="item2.id"
          @click="choosetime(index)"
        >
          <view>{{ item2.status == 1 ? '可预约' : item2.status == 2 && item2.user_cancel == 2 ? '取消预约' : '已预约' }}</view>
          <view>{{ item2.time_slot }}</view>
        </view>
      </view>
      <view style="margin-top: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 30rpx; color: #666666">
        课程可分开预约，预约成功后自动扣除已预约过的课时，剩余课程 可在进行中的订单中继续预约
      </view>
    </view>
    <!-- 提交 -->
    <view class="submit" @click="goback">提交</view>
  </view>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      actindex: '0',
      week: [],
      week2: [],
      keshiid: '', //传递的课时id
      timeindex: null,
      list: [], // 数据列表
      idlist: [], //选中的时间段id
      weeklist: [] // 去重后的id列表
    };
  },
  methods: {
    // 选择周几
    chooseweek(index) {
      this.actindex = index;
    },
    // 选择时间
    choosetime(index) {
      if (this.list[this.actindex].list[index].user_cancel == 0 && this.list[this.actindex].list[index].status == 2) {
        return uni.showToast({
          title: '该时间段已被其他同学预约',
          icon: 'none'
        });
      }
      this.timeindex = index;
      this.list[this.actindex].list[index].isTrue = !this.list[this.actindex].list[index].isTrue;
    },

    // 携带时间返回
    goback() {
      console.log(this.list);
      this.list.forEach((item) => {
        item.list.forEach((item) => {
          if (item.isTrue) {
            this.idlist.push(item.id);
          }
        });
      });
      console.log('时间段id', this.idlist);

      for (let i = 0; i < 7; i++) {
        this.list[i].list.forEach((item) => {
          if (this.idlist.indexOf(item.id) != -1) {
            this.week.push(i);
          }
        });
      }

      console.log('week-----', this.week);

      uni.$http
        .post('/user_order/checkAppointment', {
          period_id: this.keshiid,
          teacher_setup_id: this.idlist.join(',')
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.weeklist = [...new Set(this.week)];
            console.log('去重后的时间段id', this.weeklist);
            // return;
            this.weeklist.forEach((item) => {
              this.week2.push(this.list[item].name);
            });
            console.log('周', this.week2);
            uni.redirectTo({
              url: '/parents/skyuyue/skyuyue?idlist=' + JSON.stringify(this.idlist) + '&week=' + JSON.stringify(this.week2)
            });
          }
          this.idlist = [];
          this.week = [];
        });
    },
    // 获取上课时间
    async getsktime(id) {
      const res = await uni.$http.post('/user_order/teacherSetupList', {
        teacher_id: id,
        order_id: '0'
      });
      // console.log('上课时间', res);
      this.list = res.data.data;
      this.list.forEach((item) => {
        item.list.forEach((item) => {
          Vue.set(item, 'isTrue', false);
        });
      });
      // console.log(this.list);
    }
  },
  async onLoad(e) {
    console.log(e.id, e.subjectid);
    this.keshiid = e.subjectid;
    // 获取上课时间
    await this.getsktime(e.id);
    if (this.$store.state.teacher_setup_id != '') {
      console.log(this.$store.state.teacher_setup_id);
      this.list.forEach((item) => {
        // item.week_date = item.week_date.split('-')[1];
        console.log(item.week_date);
        item.list.forEach((item) => {
          if (this.$store.state.teacher_setup_id.includes(item.id)) {
            item.isTrue = true;
          }
        });
      });
      console.log('上课的时间', this.list);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .yuyuebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 434rpx;
    margin: 20rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .common {
      box-sizing: border-box;
      width: 102rpx;
      height: 80rpx;
      font-size: 28rpx;
      text-align: center;
      // line-height: 62rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .act {
      background: #ecefff;
      color: #3553e8;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
    .yuyueitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 110rpx;
      background: #ffffff;
      margin-right: 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
    .timecommon {
      background: #e8ecff;
      border: 2rpx solid #3553e8;
      color: #3553e8;
    }
    .yiyuyue {
      background: #f9f9f9;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 60rpx;
    left: 30rpx;
    width: 690rpx;
    height: 90rpx;
    background-color: #3553e8;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    border-radius: 100rpx;
  }
}
</style>